<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div+css-布局</title>
</head>
<body>
<h1>1.多行布局</h1>
<div>
  <div style="border: 1px solid;width: 960px;">第一行</div>
  <div style="border: 1px solid;width: 960px;">第二行</div>
  <div style="border: 1px solid;width: 960px;">第三行</div>
</div>

<hr>
<h1>2.多列布局</h1>
<div style="width: 960px">
  <div style="border: 1px solid;float: left;width:30% ">第一列</div>
  <div style="border: 1px solid;float: left;width:30% ">第二列</div>
  <div style="border: 1px solid;float: left;width:30% ">第三列</div>
</div>
<hr>
<h1>3.上-左右</h1>
<div style="width:960px;border: 1px solid;float:left;clear: both">
    <div style="width: 100%;float: left;clear: both;">
        上
    </div>
    <div style="width: 100%;">
      <div style="float:left;width: 20%;">左</div>
      <div style="float:left;width: 60%;">右</div>
    </div>
</div>
<hr style="clear: both;">
<h1>4.上-左中右-下</h1>
</body>
</html>